<template>
  <div class="profile-container">
    <van-nav-bar title="个人信息" />
    
    <div class="user-info">
      <van-cell-group inset>
        <van-cell title="用户名" :value="userInfo?.username" />
        <van-cell title="昵称" :value="userInfo?.nickname" />
      </van-cell-group>
    </div>
    
    <div class="action-buttons">
      <van-button
        round
        block
        type="danger"
        @click="onLogout"
      >
        退出登录
      </van-button>
    </div>
    
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/orders">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { showDialog } from 'vant'

const router = useRouter()
const userStore = useUserStore()
const active = ref(2)

const userInfo = computed(() => userStore.userInfo)

const onLogout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true
  }).then(() => {
    userStore.logout()
    router.push('/login')
  })
}
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.user-info {
  margin-top: 20px;
}

.action-buttons {
  margin: 30px 16px;
}
</style> 